<template>
	<view class="page">
		<u--form labelWidth='100' :model="userInfo" ref="Fform">
			<u-form-item label="线索创建时间" borderBottom>
				<u--input v-model="userInfo.clueCreateDateString" disabled disabledColor="#ffffff" border="none">
				</u--input>
			</u-form-item>
			<u-form-item label="出险时间" borderBottom>
				<u--input v-model="userInfo.outRepairDateString" disabled disabledColor="#ffffff" border="none">
				</u--input>
			</u-form-item>
			<u-form-item label="跟踪日期" prop="repairDateString" borderBottom>
				<u--input v-model="userInfo.repairDateString" disabled disabledColor="#ffffff" border="none"></u--input>
				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="线索类型" prop="clueType" borderBottom>
				<u--input v-model="userInfo.clueType" disabled disabledColor="#ffffff" border="none"></u--input>
				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="车架号" prop="vin" borderBottom>
				<u--input v-model="userInfo.vin" disabledColor="#ffffff" placeholder="请输入车架号码" border="none"></u--input>

			</u-form-item>
			<u-form-item label="报案人" prop="reportPerson" borderBottom required>
				<u--input v-model="userInfo.reportPerson" border="none"></u--input>
			</u-form-item>

			<u-form-item label="车牌号" prop="carId" borderBottom required>
				<u--input v-model="userInfo.carId" disabled disabledColor="#ffffff" placeholder="请填写车牌号" border="none">
				</u--input>

			</u-form-item>
			<u-form-item label="电话" prop="phone" borderBottom required>
				<u--input v-model="userInfo.phone" border="none" type='number' maxlength="11"></u--input>
			</u-form-item>

			<u-form-item label="性别" prop="sexName" borderBottom @click="showSex = true">
				<u--input v-model="userInfo.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none">
				</u--input>

			</u-form-item>

			<u-form-item label="品牌名称" prop="carBrandName" borderBottom>
				<u--input v-model="userInfo.carBrandName" disabled disabledColor="#ffffff" border="none">
				</u--input>

			</u-form-item>
			<u-form-item label="车系名称" prop="carClassName" borderBottom>
				<u--input v-model="userInfo.carClassName" disabled disabledColor="#ffffff" border="none">
				</u--input>

			</u-form-item>
			<u-form-item label="车型名称" prop="carTypeName" borderBottom>
				<u--input v-model="userInfo.carTypeName" disabled disabledColor="#ffffff" border="none">
				</u--input>

			</u-form-item>
			<u-form-item label="车型细分名称" prop="carSubtypeName" borderBottom>
				<u--input v-model="userInfo.carSubtypeName" disabled disabledColor="#ffffff" border="none">
				</u--input>

			</u-form-item>
			<!-- <u-form-item label="车辆里程" prop="carMileage"  borderBottom>
				<u--input v-model="userInfo.carMileage" disabledColor="#ffffff" border="none" type="number">
				</u--input>
			</u-form-item>
			<u-form-item label="人车关系" prop="carRelation"  borderBottom >
				<u--input v-model="userInfo.carRelation" disabled disabledColor="#ffffff" border="none" type="number">
				</u--input>
			</u-form-item> -->









			<u-form-item label="跟踪详情" prop="remark">
				<u--textarea v-model="userInfo.remark" placeholder="请输入内容"></u--textarea>
			</u-form-item>
			<u-form-item label="图片上传">
				<u-upload :fileList="fileList1" :useBeforeRead='true' :deletable="false" :disabled="true"
					:maxCount="fileList1.length">
				</u-upload>
			</u-form-item>

			<u-form-item label="当前位置">
				<u--textarea v-model="userInfo.clockInLocation" disabled></u--textarea>
			</u-form-item>



			<u-form-item label="录音">
				<u-row justify="space-between">
					<u-col span="10" v-for="(item,i) in userInfo.voiceUrlPath" :key="i">
						<u-button @click='handleRecordClick(item)'>
							<text> 播放录音 {{Math.round(intervalTime)}}s</text>
						</u-button>
					</u-col>

				</u-row>





			</u-form-item>




		</u--form>




		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect" />


		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import plateInput from '@/common/components/uni-plate-input/uni-plate-input.vue';

	var util = require('@/pagesA/common/utils/count.js') //计算时分秒函数
	import store from '@/store/index.js';

	const recorderManager = uni.getRecorderManager();

	const innerAudioContext = uni.createInnerAudioContext();

	innerAudioContext.autoplay = true;

	import {
		pathToBase64,
		base64ToPath
	} from 'pagesA/common/main/base64.js'
	var lists;
	var lists2;
	var newImgListN = []
	var newImgListN2 = []
	export default {
		components: {
			plateInput,

		},
		data() {
			var phoneRule = (rule, value, callback) => {
				if (this.validatePhone(value)) {
					callback()
				} else {
					callback(new Error('请正确输入手机号码'))
				}
			}
			var vinRule = (rule, value, callback) => {
				if (this.validateVin(value)) {
					// this.$refs.Fform.validateField('vin')
					callback()
				} else {
					callback(new Error('请正确输入车架号'))
				}
			}

			return {
				voicePath: "",
				timerMsg: 1,
				isRecord: false, // 记录状态,录音中或者是未开始
				recording: false,
				intervalTime: 0,
				intervalTimeTile: 0,
				timer: null,
				timerOut: null,
				receiveMsgDateModel: false, //接收信息时间弹窗
				showSex: false, //性别
				plateShow: false, //车牌号弹框
				fileList1: [],
				fileList2: [],
				userInfo: {
					clueId: '',
					repairDateString: '', //出险时间
					vin: '', //接收信息时间
					reportPerson: '', //报案人
					sex: '', //性别
					sexName: '', //性别页面展示
					carId: '', //车牌号
					isNewEnergy: 7, //是否新能源
					phone: '', //手机号
					remark: '', //备注
					clueType: '', //线索类型
					carBrandName: '',
					carBrand: '',
					carClassName: '',
					carClass: '',
					carTypeName: '',
					carType: '',
					carSubtypeName: '',
					carSubtype: '',
					carMileage: null,
					carRelation: '',

				},
				actions: [{
						id: 1,
						name: '男',
					},
					{
						id: 0,
						name: '女',
					}
				],
			}
		},
		onShow() {
			// this.recordShow()
		},
		onLoad(option) {
			let self = this;
			// recorderManager.onStop(function(res) {
			// 	self.voicePath = res.tempFilePath;
			// });
			// console.log(option)
			uni.showLoading({
				title: '加载中',
				mask: true,
				icon: 'loading',
			});
			this.userInfo.clueId = option.name
			this.userInfo.repairDateString = this.getCurrentDate()
			// console.log(this.getCurrentDate())
			self.fileList1 = []
			self.fileList2 = []

			self.$request('getMyClueItem', {
				itemId: option.name
				// itemId: 'EB39AA11161540B0E0532987410AEA43'
			}, 'get').then(res2 => {
				if (res2.code == 200) {
					self.userInfo = res2.data

					self.intervalTime = res2.data.intervalTime
					self.intervalTimeTile = res2.data.intervalTime

					if (self.userInfo.carImgUrlPath.length != 0) {
						self.userInfo.carImgUrlPath.forEach(i => {
							var obj = {
								url: i
							}
							self.fileList1.push(obj)
						})
					}



					uni.hideLoading();
				} else {
					self.$refs.uToast.error(`${res2.message}`)
					uni.hideLoading();
				}
			})

		},

		onReady() {
			// this.$refs.Fform.setRules(this.rules);
		},
		methods: {


			handleRecordClick(i) {
				var that = this

				var timerOut;

				innerAudioContext.src = i;
				innerAudioContext.play();


				var time = Math.round(that.intervalTimeTile)
				console.log(Math.round(that.intervalTimeTile))
				timerOut = setInterval(() => {
					if (Math.round(time) == 0) { //进行判断
						clearInterval(timerOut);
						that.$refs.uToast.success("播放结束")
						that.intervalTime = Math.round(that.intervalTimeTile)
					} else {
						uni.$u.toast('录音播放中...')
						time--;
						that.intervalTime = time
					}
				}, 1000);

			},









			validateVin: (val) => {
				return /^[A-HJ-NPR-Z\d]{8}[X\d][A-HJ-NPR-Z\d]{3}\d{5}$/.test(val);
			},

			validatePhone: (val) => {
				return /^1[3456789]\d{9}$/.test(val);
			},













			getCurrentDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				return year + "-" + this.formatZero(month) + "-" + this.formatZero(day);
			},
			formatZero(n) {
				if (n >= 0 && n <= 9) {
					return "0" + n;
				} else {
					return n;
				}
			}



		},
		watch: {
			'userInfo.vin'(newValue, oldValue) {
				if (this.validateVin(newValue)) {
					this.$refs.Fform.validateField('vin')
				}
			}
		}

	}
</script>

<style>
	.page {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
</style>